<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div>
      <LoadingView v-if="showLoading" />
      <div class="index" v-else>
        <div class="swipe" v-if="indexDataList">
          <div class="box" :style="{ backgroundColor: `rgb(${bgColor})` }">
            <van-swipe
              :autoplay="3000"
              indicator-color="white"
              class="my-swipe"
            >
              <van-swipe-item
                v-for="(item, index) in indexDataList[0].data"
                :key="index"
                @click="
                  $router.push({
                    path: '/product',
                    query: {
                      goodsId: item.info.goodsId,
                      productId: item.info.defaultProductId,
                    },
                  })
                "
              >
                <img v-lazy="item.img" fit="cover" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
        <div class="page" v-if="indexDataList">
          <div class="delivery">
            <img
              src="	https://image-mall.gxptkc.com/m/resources/index/mobile.png"
              alt=""
            />
            <p>本店全部商品发快递400-0775-248</p>
          </div>
          <div class="top">
            <div class="top-title">
              <img
                src="https://image-mall.gxptkc.com/m/resources/index/notice1.png"
                alt=""
              />
              <div class="scroll">
                <van-notice-bar
                  color="#333"
                  background="#fff"
                  :text="indexDataList[2].text"
                />
              </div>
              <p class="right">> ></p>
            </div>
            <div class="top-nav">
              <ul class="list">
                <li
                  v-for="(item, index) in navList"
                  :key="index"
                  @click="
                    $router.push({
                      path: '/goods',
                      query: { categoryId: item.url },
                    })
                  "
                >
                  <img v-lazy="item.img" alt="" />
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="white"></div>
          <div class="goods-view">
            <ul class="list">
              <li
                v-for="(item, index) in indexDataList[7].data"
                :key="index"
                @click="
                  $router.push({
                    path: '/product',
                    query: {
                      goodsId: item.info.goodsId,
                      productId: item.info.defaultProductId,
                    },
                  })
                "
              >
                <img v-lazy="item.img" alt="" />
              </li>
            </ul>
          </div>
          <div class="goods-list">
            <GoodsView :data="indexDataList[8].data.info" />
          </div>

          <div class="bottom-goods">
            <div class="scroll">
              <ul class="nav">
                <li
                  v-for="(i, index) in indexDataList[9].data"
                  :key="index"
                  @click="navIndex = index"
                  :class="{ active: index == navIndex }"
                >
                  <p>{{ i.title }}</p>
                  <span>{{ i.sub_title }}</span>
                </li>
              </ul>
            </div>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :offset="10"
            >
              <GoodsView :data="navGoodsList" />
            </van-list>
          </div>
          <div class="empty"></div>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import GoodsView from "@/components/GoodsView.vue";
import LoadingView from "@/components/LoadingView.vue";
import { Toast } from "vant";
import Vue from "vue";
//下拉刷新
import { PullRefresh } from "vant";
//list列表，可以做触底加载
import { List } from "vant";
import { Lazyload } from "vant";

Vue.use(Lazyload);
Vue.use(List);
Vue.use(Toast);
Vue.use(PullRefresh);
export default {
  components: { GoodsView, LoadingView },
  data() {
    return {
      indexDataList: null,
      navList: [],
      navIndex: 0,
      navGoodsList: [],
      showLoading: true,
      isLoading: false,

      //触底加载
      loading: false,
      finished: false,

      more: 10,
    };
  },
  watch: {
    navIndex(index) {
      this.navGoodsList = this.indexDataList[9].data[index].info.slice(0, 10);
      this.finished = false;
    },
  },
  computed: {
    ...mapState(["indexData", "bgColor"]),
  },
  methods: {
    ...mapMutations(["keepIndexData"]),
    async onRefresh() {
      let indexDataRes = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/system/front/deco/index?os=h5`
      );
      this.indexDataList = JSON.parse(indexDataRes.data.data.data);
      this.keepIndexData(this.indexDataList);
      this.navList = [
        ...this.indexDataList[3].data,
        ...this.indexDataList[4].data,
      ];
      this.navGoodsList = this.indexDataList[9].data[0].info.slice(0, 10);
      Toast("刷新成功");
      this.isLoading = false;
    },
    async onLoad() {
      this.more += 10;
      this.navGoodsList = this.indexDataList[9].data[this.navIndex].info.slice(
        0,
        this.more
      );

      this.loading = false;
      // 数据全部加载完成
      if (
        this.navGoodsList.length >=
        this.indexDataList[9].data[this.navIndex].info.length
      ) {
        this.finished = true;
      }
    },
  },
  async created() {
    let indexDataRes = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/system/front/deco/index?os=h5`
    );
    this.indexDataList = JSON.parse(indexDataRes.data.data.data);
    this.keepIndexData(this.indexDataList);
    this.navList = [
      ...this.indexDataList[3].data,
      ...this.indexDataList[4].data,
    ];
    this.navGoodsList = this.indexDataList[9].data[0].info.slice(0, this.more);

    this.showLoading = false;
  },
};
</script>

<style lang="scss" scoped>
.index {
  background-color: rgb(245, 245, 245);
  .notice-swipe {
    height: 30px;
  }
  .my-swipe {
    width: 355rem;
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 7rem;
  }

  .swipe {
    height: 144rem;
    background-color: #fff;

    .box {
      width: 100vw;
      height: 80rem;
      // margin-top: 20rem;
      // background-color: rgb(252, 28, 28);
      border-radius: 0 0 20rem 20rem;
      text-align: center;
      transition: all 0.8s;

      img {
        width: 355rem;
        height: 140rem;
      }
    }
  }

  .page {
    padding: 10rem 0;
    box-sizing: border-box;

    .delivery {
      background-color: #fff;
      padding: 8rem;
      display: flex;
      align-items: center;
      border-radius: 6rem;
      margin: 0 10rem;

      img {
        width: 15rem;
        height: 16rem;
      }

      P {
        font-size: 13rem;
        color: #333;
      }
    }

    .top {
      padding: 10rem;

      .top-title {
        display: flex;
        background-color: #fff;
        align-items: center;

        img {
          width: 62rem;
          height: 40rem;
        }

        P {
          width: 40rem;
          height: 20rem;
          line-height: 20rem;
          text-align: center;
        }
        .right {
          font-weight: bold;
          font-size: 14rem;
        }

        .scroll {
          flex-grow: 1;
          overflow: hidden;
        }
      }

      .top-nav {
        background-color: #fff;
        border-radius: 5rem;

        ul.list {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 15rem;
            width: 20%;

            img {
              width: 44rem;
              height: 44rem;
            }

            span {
              font-size: 13rem;
              color: #303133;
              margin-top: 5rem;
            }
          }
        }
      }
    }

    .goods-show {
      background-color: #fff;

      // ul.list {
      padding: 8rem;
      // display: flex;
      // justify-content: space-between;
      // flex-wrap: wrap;
      display: inline-block;

      > div {
        width: 48%;
        height: 48%;
        display: inline-block;

        img {
          width: 100%;
        }

        &:first-child {
          img {
            width: 50%;
            height: 50%;
          }
        }

        &:last-child {
          img {
            width: 50%;
            height: 50%;
          }
        }
        // }
      }
    }

    .goods-view {
      background-color: #fff;
      margin-bottom: 10rem;

      ul.list {
        padding: 10rem 10rem 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
          width: 30%;
          margin-bottom: 10rem;

          img {
            width: 100%;
          }
        }
      }
    }

    .white {
      width: 355rem;
      height: 30rem;
      background-color: #fff;
      margin: 10rem;
    }

    .goods-list {
      background-color: #fff;
      // margin-bottom: 10rem;
      padding-top: 5rem;
    }

    .bottom-goods {
      // width: calc(100vw - 20rem);
      width: 100%;
      overflow: hidden;
      padding: 10rem 0;
      box-sizing: border-box;

      .scroll {
        width: 100%;
        overflow: auto;
        margin-bottom: 10rem;

        ul.nav {
          width: 180%;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;

          // overflow: auto;
          li {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-right: 20rem;
            justify-content: center;
            align-items: center;

            &.active {
              p {
                font-size: 17rem;
                font-weight: bold;
              }

              span {
                background-color: #fa1c1c;
                color: #fff;
                padding: 2rem 4rem;
                border-radius: 10rem;
              }
            }

            p {
              font-size: 15rem;
              color: #333;
            }

            span {
              color: #666;
            }
          }
        }
      }
    }

    .empty {
      width: 100vw;
      height: 55rem;
    }
  }
}
</style>